<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 这里也是用的空格来写的 -->
        <van-grid :border="false" :column-num="2" :gutter="5">
          <van-grid-item v-for="item in banners" :key="item.img1">
            <RouterLink :to="`/detail/${item.proid}`">
              <div>
                <van-image :src="item.img1" class="imglist" />
                <!-- 最多显示两行 -->
                <div class="van-multi-ellipsis--l2">
                  {{ item.proname }}
                </div>
                <div class="price">￥{{ item.originprice }}</div>
                <!-- {{ item.proid }} -->
              </div>
            </RouterLink>
          </van-grid-item>
        </van-grid>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { shoplist } from "../services/index";
import { useRouter } from "vue-router";
const router = useRouter();
const route = useRouter();
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const fist = ref(1);
const banners = ref([]);

const onLoad = async () => {
  const reslut = await shoplist(fist.value, 10);
  fist.value++;
  console.log(reslut.data);
  banners.value.push(...reslut.data.data);
  loading.value = false;
  if (reslut.data.data.lenth == 0) {
    loading.value = true;
    finished.value = true;
  }
};
const onRefresh = () => {
  finished.value = false;
  loading.value = true;
  onLoad();
};

// }
</script>
<style scoped>
.van-multi-ellipsis--l2 {
  margin-top: 5px;
  font-size: 12px;
}
.price {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 700;
  color: red;
}
.van-image {
  height: 164.13px !important;
  width: 164.13px !important;
}
.van-grid-item {
  width: 180.1px;
  height: 263.7px;
}
</style>
